<script lang="ts" setup>
import {useRouter} from 'vue-router';

const router = useRouter()

const handleSelect = (key: string, keyPath: string[]) => {
  console.log(key, keyPath)
}

</script>

<template>

  <el-config-provider namespace="ep">

    <!-- 导航栏 -->
    <el-menu
        :router="true"
        :default-active="router.currentRoute.value.path"
        mode="horizontal"
        @select="handleSelect"
        background-color="#8ABC90"
        active-text-color="#016F08">

      <el-menu-item index="/" style="margin-left: 100px">
        <img
            style="width: 40px;"
            src="/src/images/vue.svg"
            alt="Element logo"
        />
      </el-menu-item>

      <div class="flex-grow"/>

      <el-menu-item index="/">HOME</el-menu-item>
      <el-menu-item index="/data">DATA</el-menu-item>
      <el-menu-item index="/prediction">PREDICTION</el-menu-item>
      <el-menu-item index="/about">ABOUT</el-menu-item>

    </el-menu>

    <div class="flex main-container">
      <!-- 路由匹配到的组件将渲染在这里 -->
      <router-view></router-view>
    </div>

    <!--页脚-->
    <el-container>
      <footer style="position: fixed; bottom: 0; width: 100%; height:60px; text-align: center;
      background-color: #8ABC90; padding-bottom: 5px;">
        <div style="font-size: 0.8em;">
          <p>AHUCM 2024 &copy; ahtcm.edu.cn</p>
          <p>Anhui University of Chinese Medicine</p>
        </div>
      </footer>
    </el-container>

  </el-config-provider>
</template>

<style>

.main-container {
  height: calc(100vh - 10vh - 3px);
}

</style>
